.topic {
    height: 100%;
    .topiclist {
        border-top: 1px solid gainsboro;
        height: 100%;
        overflow-y: auto;
        background-color: rgba(220, 220, 220, 0.268);
        .item {
            height: 160px;
            margin: 20px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
            }

            .text {
                color: white;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                position: absolute;
                top: 0;
                background-color: rgba(255, 255, 255, 0.485);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 30px;

                .cate {
                    font-size: 12px;
                    color: gray;
                    width: 50px;
                    height: 20px;
                    border-radius: 1px;
                    text-align: center;
                    line-height: 20px;
                    background-color: #fff;
                }

                .name {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    font-size: 18px;
                }

                .line {
                    width: 50px;
                    border-top: 3px solid #fff;
                }
            }

        }

    }
}